<template>
  <div>
    <van-nav-bar title="我的" left-arrow @click-left='$router.back()'>
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>

    <van-contact-card type="edit" :name="userName" :tel="info.loginName" :editable="false" />
  <!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px;"
>
<van-coupon-list
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  :disabled-coupons="disabledCoupons"
  @change="onChange"
  @exchange="onExchange"
/>
</van-popup>
<div><p>如果喜欢请给我们评分！</p></div>
  <van-rate v-model="value" />
  </div>
</template>

<script setup>
import { getUserInfo } from "../../api/index.js"
import { ref,onMounted,computed,reactive } from "vue"

let info = ref({})
let value = ref(0)


let userName = computed(() => {
  return "皮皮用户" + info.value.loginName;
})
onMounted(() => {
  getData();
})
console.log(info);
async function getData() {
  let data = await getUserInfo()
  info.value = data.data;
}

const coupon = {
      available: 1,
      condition: '无门槛\n最多优惠12元',
      reason: '',
      value: 150,
      name: '优惠券名称',
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: '1.5',
      unitDesc: '元',
    };

    const coupons = ref([coupon]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      coupons.value.push(coupon);
    };

</script>

<style lang="less" scoped>
p{
  font-size: medium;

}
</style>